<template>
    <div>
        <view class="content">
            <view class="card">
                <view class="title"> 动态分类 </view>
                <picker
                    mode="selector"
                    @change="bindPickerChange"
                    :range="tab_lists"
                    range-key="name"
                >
                    <view
                        class="uni-input"
                        :style="{
                            color: tab_lists[index] ? '#000' : '#999',
                        }"
                    >
                        {{
                            tab_lists[index] ? tab_lists[index].name : "请选择"
                        }}
                        <image
                            class="icon"
                            src="/static/static/technician/joinUs/right.png"
                            mode="scaleToFill"
                        />
                    </view>
                </picker>
            </view>

            <view class="card">
                <view class="image">
                    <image
                        @click="onUploadImg"
                        v-if="type == 'photo' && photoList.length < 9"
                        class="upload"
                        src="/static/static/technician/joinUs/upimageNine.png"
                        mode="scaleToFill"
                    />

                    <view
                        class="box"
                        v-for="(item, index) in photoList"
                        :key="index"
                    >
                        <image
                            class="upload"
                            :src="$imageURL + item"
                            mode="scaleToFill"
                        />

                        <image
                            @click="onAgainUploadImg('photoList', index)"
                            class="markImg"
                            src="/static/static/technician/joinUs/upagin.png"
                            mode="scaleToFill"
                        />
                    </view>

                    <image
                        @click="onUploadCover"
                        v-if="type == 'video' && !cover"
                        class="upload"
                        src="/static/static/technician/joinUs/cover.png"
                        mode="scaleToFill"
                    />
                    <view class="box" v-if="cover">
                        <image
                            class="upload"
                            :src="$imageURL + cover"
                            mode="scaleToFill"
                        />
                        <image
                            @click="onUploadCover"
                            class="markImg"
                            src="/static/static/technician/joinUs/upagin.png"
                            mode="scaleToFill"
                        />
                    </view>

                    <image
                        @click="onUploadVideo"
                        v-if="type == 'video' && !video"
                        class="upload"
                        src="/static/static/technician/joinUs/video.png"
                        mode="scaleToFill"
                    />
                    <view class="box" v-if="video">
                        <video class="upload" :src="$imageURL + video" />
                        <image
                            @click.native.stop="onUploadVideo"
                            class="markImg"
                            src="/static/static/technician/joinUs/upagin.png"
                            mode="scaleToFill"
                        />
                    </view>

                    <input
                        class="input"
                        type="text"
                        placeholder="填写标题有更多人观看哦~"
                        maxlength="20"
                        v-model="title"
                    />

                    <view class="line"></view>

                    <textarea
                        class="textarea"
                        v-model="content"
                        placeholder="还有更多的想法也一起写在正文吧~"
                    />
                </view>
            </view>

            <view class="card">
                <view class="location flex align-center just-between">
                    <view class="left">
                        <image
                            class="location_img"
                            src="/static/static/technician/order/location.png"
                            mode="scaleToFill"
                        />
                        <text>添加地点</text>
                    </view>
                    <view class="right flex align-center">
                        <view
                            class="text"
                            :style="{ color: address ? '#333' : '#999' }"
                            @click="getLocation"
                        >
                            {{ address || "请选择" }}
                        </view>
                        <image
                            class="icon"
                            src="/static/static/technician/joinUs/right.png"
                            mode="scaleToFill"
                        />
                    </view>
                </view>
            </view>
        </view>
        <view class="btns">
            <view class="btn" @click="submit"> 发布动态 </view>
        </view>
    </div>
</template>

<script>
import { getDynamicList, publishDynamic } from "@/API/API/recruit.js";

export default {
    data() {
        return {
            index: null,
            tab_lists: [],
            title: "",
            content: "",
            address: "",
            lat: "",
            lng: "",
            photoList: [],
            cover: "",
            video: "",
            type: "",
            tempFilePathslength: 0,
            service_cate_id: "",
            id: "",
        };
    },

    watch: {
        photoList: {
            handler() {
                let length = this.photoList.length || 0;
                if (length === this.tempFilePathslength) {
                    uni.hideLoading();
                }
            },
            immediate: true,
            deep: true,
        },
    },

    onLoad(options) {
        this.getTabList();
        this.type = options.type;
        this.id = options.id;

        if (options.infoData) {
            let infoData = JSON.parse(options.infoData);
            console.log(infoData);
            infoData.images.forEach((item) => {
                // https://reproduce.ascetic.top
                item = item.replace(/https:\/\/reproduce\.ascetic\.top\//, "/");
                this.photoList.push(item);
            });

            if (infoData.file) {
                infoData.file = infoData.file.replace(
                    /https:\/\/reproduce\.ascetic\.top\//,
                    "/"
                );
            }

            if (infoData.cover) {
                infoData.cover = infoData.cover.replace(
                    /https:\/\/reproduce\.ascetic\.top\//,
                    "/"
                );
            }

            this.title = infoData.name;
            this.content = infoData.content;
            this.address = infoData.address;
            this.lat = infoData.lat;
            this.lng = infoData.lng;
            this.cover = infoData.cover;
            this.video = infoData.file;
            this.service_cate_id = infoData.service_cate_id;
        }
    },

    methods: {
        onUploadImg() {
            uni.chooseImage({
                count: 9,
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    this.tempFilePathslength =
                        res.tempFilePaths.length + this.photoList.length;
                    res.tempFilePaths.forEach((item) => {
                        uni.uploadFile({
                            url: this.$HTTP + "common/upload",
                            filePath: item,
                            name: "file",
                            success: (uploadFileRes) => {
                                this.photoList.push(
                                    JSON.parse(uploadFileRes.data).data.url
                                );
                            },
                        });
                    });
                },
            });
        },
        onUploadCover() {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    uni.uploadFile({
                        url: this.$HTTP + "common/upload",
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            this.cover = JSON.parse(
                                uploadFileRes.data
                            ).data.url;
                        },
                    });
                },
            });
        },
        onUploadVideo() {
            uni.chooseVideo({
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    uni.uploadFile({
                        url: this.$HTTP + "common/upload",
                        filePath: res.tempFilePath,
                        name: "file",
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            this.video = JSON.parse(
                                uploadFileRes.data
                            ).data.url;
                        },
                    });
                },
            });
        },
        onAgainUploadImg(type, index) {
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    uni.showLoading({ title: "上传中" });
                    uni.uploadFile({
                        url: this.$HTTP + "common/upload",
                        filePath: res.tempFilePaths[0],
                        name: "file",
                        success: (uploadFileRes) => {
                            uni.hideLoading();
                            if (index === undefined) {
                                this[type] = JSON.parse(
                                    uploadFileRes.data
                                ).data.url;
                            } else {
                                this[type].splice(
                                    index,
                                    1,
                                    JSON.parse(uploadFileRes.data).data.url
                                );
                            }
                        },
                    });
                },
            });
        },
        getTabList() {
            getDynamicList({ type: 1 }).then((res) => {
                this.tab_lists = res.data;
                if (this.service_cate_id !== "") {
                    this.tab_lists.forEach((item) => {
                        if (item.id == this.service_cate_id) {
                            this.index = this.tab_lists.indexOf(item);
                        }
                    });
                }
            });
        },
        bindPickerChange(e) {
            this.index = e.target.value;
        },
        getLocation() {
            uni.chooseLocation({
                success: (res) => {
                    this.address = res.name + res.address;
                    this.lat = res.latitude;
                    this.lng = res.longitude;
                },
            });
        },
        submit() {
            if (!this.tab_lists[this.index]) {
                uni.showToast({ title: "请选择动态分类", icon: "none" });
                return;
            } else if (!this.title) {
                uni.showToast({ title: "请输入标题", icon: "none" });
                return;
            } else if (!this.content) {
                uni.showToast({ title: "请输入内容", icon: "none" });
                return;
            } else if (!this.address) {
                uni.showToast({ title: "请选择地址", icon: "none" });
                return;
            }
            publishDynamic({
                name: this.title,
                content: this.content,
                images: this.photoList,
                file: this.video,
                address: this.address,
                lat: this.lat,
                lng: this.lng,
                service_cate_id: this.tab_lists[this.index].id,
                type: this.type == "photo" ? 1 : 2,
                cover: this.cover,
                dynamic_id: this.id,
            })
                .then((res) => {
                    uni.showToast({ title: res.msg, icon: "none" });
                    setTimeout(() => {
                        uni.redirectTo({
                            url: "/subPages/technician/recruit/ToBeReviewed?type=dynamic",
                        });
                    }, 800);
                })
                .catch((err) => {
                    uni.showToast({ title: err.msg, icon: "none" });
                });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    width: 100vw;
    padding: 15rpx;
    box-sizing: border-box;
}
.card {
    padding: 28rpx 20rpx;
    background-color: white;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.icon {
    width: 12rpx;
    height: 24rpx;
    margin-left: 10rpx;
}
.location_img {
    width: 20rpx;
    height: 22rpx;
    margin-right: 10rpx;
}
.upload {
    width: 162rpx;
    height: 162rpx;
    margin: 0 5rpx;
}
.box {
    width: 162rpx;
    height: 162rpx;
    margin: 5rpx;
    position: relative;
    display: inline-block;

    .markImg {
        position: absolute;
        bottom: 0;
        right: -5rpx;
        width: 100%;
        height: 100%;
        z-index: 9;
    }
}

.image {
    width: 100%;
}
.input,
.textarea {
    padding: 20rpx 0;
}
.line {
    width: 100%;
    height: 2rpx;
    background-color: #eeeeee;
}
.location {
    width: 100%;
    .left {
        min-width: 180rpx;
    }
    .right {
        flex: 1;
        justify-content: end;
        .text {
            line-height: 1.2rem !important;
        }
    }
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
    z-index: 99;

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
</style>